<template>
  <view class="all-evaluation">
    <up-list @scrolltolower="scrolltolower" height="100vh">
      <template v-if="list.length">
        <up-list-item v-for="(item, index) in list" :key="index">
          <view class="bg-white p-3.5 box-border">
            <view class="text-[29rpx]">
              <view class="mb-5 flex">
                <text class="text-[#8A8A8A] whitespace-nowrap">评价对象：</text>
                <text class="text-[#000000]">{{ item.users.join("、") }}</text>
              </view>
              <view class="mb-5 flex">
                <text class="text-[#8A8A8A] whitespace-nowrap">评价内容：</text>
                <text class="text-[#000000]">{{ item.content }}</text>
              </view>
              <view
                class="mb-2.5 flex"
                v-if="item.imgUrl && item.imgUrl.length"
              >
                <text class="text-[#8A8A8A] whitespace-nowrap"
                  >图&emsp;&emsp;片：</text
                >
                <view class="flex flex-wrap">
                  <up-album
                    :urls="item.imgUrl"
                    space="20rpx"
                    singleSize="155rpx"
                    multipleSize="155rpx"
                    autoWrap
                    :maxCount="3"
                    unit="rpx"
                  ></up-album>
                </view>
              </view>
              <view class="flex">
                <text class="text-[#8A8A8A] whitespace-nowrap">评价时间：</text>
                <text class="text-[#000000]">{{
                  item.createTime
                    ? dayjs(item.createTime).format("YYYY-MM-DD hh:mm:ss")
                    : ""
                }}</text>
              </view>
            </view>
            <up-divider lineColor="#BBBBBB"></up-divider>
            <view class="flex flex-row justify-end">
              <button
                class="btn-038AFE btn-normal mr-0"
                @click="
                  showDel = true;
                  delIds = item.id;
                "
              >
                删除
              </button>
            </view>
          </view>
          <up-gap height="10"></up-gap>
        </up-list-item>
      </template>
      <up-empty
        v-else
        mode="data"
        text="暂无记录"
        icon="http://cdn.uviewui.com/uview/empty/data.png"
      >
      </up-empty>
    </up-list>
    <up-modal
      :show="showDel"
      title="删除确认"
      content="请问是否确认删除该条服务评价？"
      :closeOnClickOverlay="true"
      contentTextAlign="center"
      showCancelButton
      @confirm="deleteEvaluation()"
      @cancel="resetModal"
      @close="resetModal"
    ></up-modal>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import { listEvaluationHis, delEvaluation } from "@/api/evaluation/index";
import { imgPrefix } from "@/config/app";
import dayjs from "dayjs";
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const uToastRef = <any>ref(null);
const data = reactive({
  queryParam: {
    pageNum: 1,
    pageSize: 10,
    userId: userInfoStore.userInfo.userId,
  },
  list: <any>[],
  total: 0,
  showDel: false,
  delIds: undefined,
});
const { queryParam, list, total, showDel, delIds } = toRefs(data);

onLoad(() => {
  getEvaluationList();
});

const scrolltolower = () => {
  let allTotal = queryParam.value.pageNum * queryParam.value.pageSize;
  if (allTotal >= total.value) {
    return;
  }
  queryParam.value.pageNum = ++queryParam.value.pageNum;
  getEvaluationList();
};

// 获取评价信息
const getEvaluationList = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  listEvaluationHis(queryParam.value)
    .then((res: any) => {
      uni.hideLoading();
      const { data } = res;
      data.records = data.records ?? [];
      data.records = arrProcess(data.records);
      list.value = [...list.value, ...data.records];
      total.value = data.total;
    })
    .catch((err: any) => {
      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};

// 数据处理 组合对象内容
const arrProcess = (arr: Array<any>) => {
  if (arr.length) {
    arr = arr.map((item: any) => {
      let badgeNumberArr = <any>[];
      let policeNameArr = <any>[];
      if (item.badgeNumber && item.badgeNumber.includes("、")) {
        badgeNumberArr = item.badgeNumber.split("、");
      }
      if (item.policeName && item.policeName.includes("、")) {
        policeNameArr = item.policeName.split("、");
      }
      item.users = <any>[];
      if (badgeNumberArr.length && policeNameArr.length) {
        policeNameArr.forEach((it: any, index: number) => {
          item.users.push(
            it + " " + badgeNumberArr[index] + "（" + item.communityName + "）"
          );
        });
      } else {
        item.users.push(
          item.policeName +
            " " +
            item.badgeNumber +
            "（" +
            item.communityName +
            "）"
        );
      }
      if (item.imgUrl) {
        item.imgUrl = item.imgUrl.split(",");
        if (item.imgUrl.length) {
          item.imgUrl = item.imgUrl.map((img: any) => {
            img = imgPrefix + img;
            return img;
          });
        }
      }
      return item;
    });
  }
  return arr;
};

// 删除评价
const deleteEvaluation = () => {
  delEvaluation(delIds.value)
    .then((res: any) => {
      // uni.hideLoading();
      resetModal();
      uToastRef.value.show({
        type: "success",
        message: "删除成功",
      });
      list.value = [];
      total.value = 0;
      getEvaluationList();
    })
    .catch((err: any) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};

const resetModal = () => {
  showDel.value = false;
  delIds.value = undefined;
};
</script>

<style lang="scss" scoped>
.all-evaluation {
  ::v-deep .u-album__row__wrapper > image {
    width: 155rpx !important;
    height: 104rpx !important;
  }
}
</style>
